<template>
  <div>
    <Card dis-hover class="bgd-content">
      <Form ref="formValidate" :model="form" :label-width="80" :rules="ruleValidate">
        <h4>基本信息</h4>
          <FormItem label="公司名" prop="name">
              <Input v-model="form.name" style="width:260px" placeholder=""></Input>
          </FormItem>
          <FormItem label="加盟费" prop="franchise">
              <Input v-model="form.franchise" style="width:260px" placeholder=""></Input>
          </FormItem>
          <FormItem label="商铺地址" prop="city">
            <Cascader :data="city" v-model="form.city" change-on-select @on-change="onChangeCascader" style="width: 260px"></Cascader>
          </FormItem>
          <FormItem label="详细信息" prop="detail">
            <Input v-model="form.detail" style="width: 260px"></Input>
          </FormItem>
          <FormItem label="到期时间" prop="expire">
              <DatePicker v-model="time" @on-change="time1" :editable='false' format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="到期时间" style="width: 260px"></DatePicker>
          </FormItem>
        <h4>联系信息</h4>
          <FormItem label="姓名" prop="lxname">
            <Input v-model="form.lxname" style="width: 260px"></Input> <span style="padding-left:20px;color: #999;">与对公账户一致</span>
          </FormItem>
          <FormItem label="对公账户" prop="lxname">
            <Input v-model="form.account" style="width: 260px"></Input> 
          </FormItem>
          <FormItem label="职位" prop="position">
              <Input v-model="form.position" style="width: 260px"></Input>
          </FormItem>
          <FormItem label="手机" prop="mobile">
              <Input v-model="form.mobile" style="width: 260px"></Input>
          </FormItem>
          <FormItem label="邮件" prop="email">
              <Input v-model="form.email" style="width: 260px"></Input>
          </FormItem>
          <FormItem label="QQ" prop="qq">
              <Input v-model="form.qq" style="width: 260px"></Input>
          </FormItem>
          <FormItem label="用户地址" prop="address">
              <Input v-model="form.address" style="width: 260px"></Input>
          </FormItem>
        <h4>附件</h4>
        <FormItem label="附件" prop="accessory" style="width: 600px">
          <Upload
              multiple
              ref="uploads"
              type="drag"
              :format="['excel','xlsx','xlsx']"
              :on-format-error="handleFormatError"
              :on-success="handleSuccess"
              :headers="headers"
              :action="url">
              <div style="padding: 20px 0">
                  <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                  <p>点击上传附件</p>
              </div>
          </Upload>
        </FormItem>
      </Form>
    </Card>
    <div class="page-block" style="">
      <Button type="primary" :loading="buttonLoad" @click="handleSubmit('formValidate')">提交</Button>
    </div>
  </div>
</template>
<script>
import store from '@/store'
import Cookies from 'js-cookie'
import { _addData, _getOne, _saveData } from '@/api/alliance.js'
import city from '@/api/city.js'
import config from '@/config'
export default {
  name: 'custApply',
  data () {
    return {
      headers: {
        'token': store.state.user.token
      },
      time: '',
      city: city,
      url: config.baseUrl.pro + 'upload',
      buttonLoad: false,
      selectedData: null,
      id: 0,
      form: {
        accessory: '',
        create_user: JSON.parse(Cookies.get('user')).username,
      },
      ruleValidate: {
        name: [
          { required: true, message: '不能为空'},
        ],
        franchise: [
          { required: true, message: '不能为空'},
        ],
        expire: [
          { required: true, message: '不能为空'},
        ],
        lxname: [
          { required: true, message: '不能为空'},
        ],
        position: [
          { required: true, message: '不能为空'},
        ],
        mobile: [
          { required: true, message: '不能为空'},
        ],
        email: [
          { required: true, message: '不能为空'},
        ],
        qq: [
          { required: true, message: '不能为空'},
        ],
        address: [
          { required: true, message: '不能为空'},
        ],
        detail: [
          { required: true, message: '不能为空'},
        ],
      }
    }
  },
  methods: {
    onChangeCascader(value, selectedData) {
      this.selectedData = selectedData
    },
    time1(e) {
      this.form.expire = e;
    },
    handleSuccess (res, file) {
      if (res.status == 1) {
        this.form.accessory = res.data
        this.$Message.success(res.msg)
        this.$refs['uploads'].clearFiles()
      }else {
        this.$Message.error('上传附件失败')
      }
    },
    // 保存数据
    handleSubmit (form) {
      this.$refs[form].validate( (valid) => {
        if (valid) {
          if (this.form.accessory == '') {
            this.$Message.error('必须上传附件')
            return;
          }

          const temp = this.form.city
          delete this.form.city

          if (temp[2] == undefined) {
            this.$Message.error('请填写位置')
            return
          }

          this.form.province = temp[0]
          this.form.city = temp[1]
          this.form.district = temp[2]
          let label = ''
          this.selectedData.forEach(element => {
            label += element.label
          });
          label += this.form.detail
          this.form.location = label
          const obj = {}
          Object.assign(obj, this.form)
          
          this.buttonLoad = true
          if (this.id == 0) {
            _addData(obj).then( res => {
              const obj = res.data
              if (obj.status == 1){
                this.$Message.success(obj.msg)
                this.$refs[form].resetFields()
                this.form.accessory = ''
                this.time = ''
              }else {
                this.$Message.error(obj.msg)
              }
              this.buttonLoad = false
              
            })
          }else {
            _saveData(obj).then( res => {
              const obj = res.data
              if (obj.status == 1){
                this.$Message.success(obj.msg)
                this.$refs[form].resetFields()
                this.form.accessory = ''
                this.time = ''
              }else {
                this.$Message.error(obj.msg)
              }
              this.buttonLoad = false
              
            })
          }
        }else {
          this.$Message.error('请填写必填项')
        }
      })
    },
    getOne() {
      _getOne({id: this.id}).then(res => {
        const obj = res.data
        if (obj.status == 1) {
          this.form = obj.data
        }else {
          this.$Message.error(obj.msg)
        }
      })
    },
    handleFormatError (file) {
      this.$Notice.warning({
          title: '错误的文件',
          desc: '文件格式：' + file.name + ' 错误, 请选择excel'
      });
    },
  },
  mounted() {
    if (this.$route.params.id) {
      this.id = this.$route.params.id
      this.getOne()
    }
  },
}
</script>
